<template>
  <div id="app">
    <router-view></router-view>
    <div class="footer" v-show="$route.meta.alive">
      <router-link class="btn" to="/main"><button class="btn" ref="index" @click="changeMeun($event)"><i class="el-icon-house hh" style="font-size:35px"></i></button></router-link>
      <router-link class="btn" to="/picture"><button class="btn" ref="picture" @click="changeMeun($event)"><i class="el-icon-picture-outline-round hh" style="font-size:35px"></i></button></router-link>
      <button class="btn" ref="aishow" @click="changeMeun($event)"><i class="el-icon-goods hh" style="font-size:35px "></i></button>
      <router-link class="btn" to="/mymeun"><button class="btn" ref="mymeun" @click="changeMeun($event)"><i class="el-icon-user hh" style="font-size:35px"></i></button></router-link>
    </div>
  </div>
  
</template>

<script>
import { ref } from '@vue/reactivity';

export default {
  setup(){
    let isRouterAlive = ref(true);
    function reload(){
      this.isRouterAlive = false;
      this.$nextTick(function(){
        this.isRouterAlive = true;
      })
    }
    function changeMeun(e){
      let btns = document.querySelectorAll(".hh");
      for(let index = 0;index<4;index++){
        let btn = btns[index];
        btn.style.color = "black";
      }
      e.target.style.color = 'skyblue'
    }
    return {
      changeMeun,
      isRouterAlive,
      reload
    }
  },

  components: { },
  name: 'App',
  mounted(){
    this.$refs.index.style.color = 'skyblue';
  },
  beforeCreate() {
    document.querySelector('body').setAttribute('style', ' margin: 0px')
  },
  provide(){
    return {
      reload:this.reload
    }
  }
}
</script>

<style>
#app {
  font-family: "PingFang SC Regular", Arial, "Helvetica Neue", Helvetica,
    sans-serif !important;
  color: #515a6e;
  margin: 0px;
}
.footer{
  position:fixed;
  display: flex;
  flex-direction: row;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 70px;
  /* background-color: rgba(235, 229, 229, 0.473); */
}
.btn{
  background-color: rgb(255, 255, 255);
  border: 0;
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  text-decoration: none;
}
 
.router-link-active {
  text-decoration: none;
}
</style>
